<template>
	<view>
		<!-- 图片 -->
		<image class="detail-img" :src="recipeDetail?.cover" mode="aspectFill"></image>
		<view class="detail-context padding-top-sm ">
			<view class="detail-title margin-left">
				<text>{{recipeDetail?.name}}，简单易做，快@你的好朋友做起来~</text>
			</view>
			<view class="flex justify-around margin-top">
				<view class="">
					<text class="cuIcon-remind text-gray"></text>
					<text class=""> 时间:</text>
					<text class="text-gray">{{recipeDetail?.cooking_time}}</text>
				</view>
				<view class="">
					<text class="cuIcon-favor text-gray"></text>
					<text> 难度:</text>
					<text class="text-gray">{{recipeDetail?.difficulty}}</text>
				</view>
				<view class="">
					<text class="cuIcon-like text-gray"></text>
					<text> 收藏</text>
					<text> 0人</text>
				</view>
			</view>
			<!-- 发布者 -->
			<view class="margin-top flex  justify-between margin align-center">
				<view class="text-center">
					<image class="detail-avatar" src="/src/static/logo.png" mode=""></image>
					<text>作者名</text>
				</view>
				<view class="text-center ">
					<button class="guanzhu flex align-center justify-center">+关注</button>
				</view>
			</view>
			<!-- 用料 -->
			<view class="cu-list menu margin-top">
				<view class="cu-item">
					<text style="font-size: 36upx;">用料</text>
					<text style="font-size: 36upx;">开始烹饪</text>
				</view>
				<view class="cu-item" v-for="(item,index) in recipeDetail?.ingredients" :key="index">
					<text>{{item.name}}</text>
					<text>{{item.quantity}}</text>
				</view>
			</view>
			<!-- 步骤 -->
			<view class="margin-top" v-for="step in recipeDetail?.steps" :key="step.step_number">
				<view class="step-title">
					步骤{{step.step_number}}
				</view>
				<view class="step-content">
					{{step.content}}
				</view>
				<view class="step-img flex align-center justify-center">
					<image :src="step.image" mode="aspectFill" v-if="step.image" ></image>
				</view>
				<view class="divider margin"></view>
			</view>
			<!-- 评价 -->
			<view class="margin-left">
				<view class="pinlun-inp margin-bottom">大家评价</view>
				<view class="flex align-center margin-bottom">
					<image class="cu-avatar round margin-right-xs" src="/src/static/logo.png" mode=""></image>
					<input type="text" class="pinlun padding-left" value="" placeholder="留下你的精彩评论"/>
				</view>
				<view class="flex justify-between align-center margin-bottom" v-for="comment in comments"  :key="comment.objectId">
					<view class="flex">
						<image class="cu-avatar round " src="/src/static/logo.png" mode=""></image>
						<view class="content margin-left-xs">
							<view class="text-grey text-sm">用户名</view>
							<view class="">
								{{comment.content}}
							</view>
						</view>
					</view>
					<view class="action padding-right">
						<view class="text-grey text-xs">22:20</view>
						<view class="">
							<text class="cuIcon-like text-gray"></text>
							{{comment.likeNum}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import type { RecipeType } from '@/model/recipe';
import type { reComment } from '@/model/re_comment';
import { ref, type Ref } from 'vue';
import { getDetailRecipe } from '@/api/recipe';
import { getComment } from '@/api/re_comment';
//菜谱详情页
const recipeDetail=ref<RecipeType|null>(null)
//菜谱评论
const comments=ref<reComment[]>([]);
const newComment=ref('')
const currentRecipeId=ref('')
onLoad(async(options)=>{
	if(options?.id){
		currentRecipeId.value=options.id
		let res=await getDetailRecipe(options.id)
		recipeDetail.value=res.data
		await loadComment()
	}
})
//加载评论
const loadComment=async()=>{
	let res=await getComment(currentRecipeId.value);
	comments.value=res
}
</script>

<style lang="scss">
page{
	background-color: #fff
}
.detail-img{
	width: 100%;
	height: 710upx;
	position: relative;
}	 
.detail-context{
	width: 100%;
	position: absolute;
	border-radius: 30upx;
	top: 600upx;
	background-color: #fff;
}   
.detail-title{
	font-size: 40upx;
	color: #000521;
}
.detail-avatar{
	width: 92upx;
	height: 92upx;
	border-radius: 50%;
}
.step-title {
  font-size: 36upx;
  font-weight:500;
  margin: 30upx 0 15upx;
  padding-left: 30upx;
}

.step-content {
  padding: 0 30upx;
  line-height: 1.6;
}

.step-image {
  width: 696upx;
  margin-left: 20%;
  border-radius: 16upx;
}
.guanzhu{
	width: 140upx;
	height: 56upx;
	background-color: #666EE8;
	color: #fff;
	font-size: 26upx;
	border-radius: 64upx;
}
.divider{
	height: 1px;
	background-color: #e0e0e0;
	margin: 10px 0;
}
.pinlun{
	width: 604upx;
	height: 64upx;
	background-color: #F2F2F282;
	border-radius: 60upx;
	font-size: 24upx;
	color: #AEAEAE;
}
.pinlun-inp{
	font-size: 36upx;
	font-weight:500;
}
</style>
